<template>
  <template v-for="route in showRoutes" :key="route.name">
    <el-sub-menu v-if="route.children" :index="route.path">
      <template #title>
        <MenuText :route="route" />
      </template>
      <!-- <menu-list :routes="route.children" /> -->
      <el-menu-item :index="child.path" v-for="child in route.children" :key="child.name">
        <template #title>
          <MenuText :route="child" />
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="route.path">
      <template #title>
        <MenuText :route="route" />
      </template>
    </el-menu-item>
  </template>
</template>
<script lang="ts">
import { defineComponent, computed, PropType } from "vue";
import { MyRoute } from "@/router/index";
import MenuText from "./MenuText.vue";
export default defineComponent({
  name: "MenuList",
  components: { MenuText },
  props: {
    routes: {
      type: Array as PropType<MyRoute[]>,
      required: true,
    },
  },
  setup(props) {
    const showRoutes = computed(() =>
      props.routes.filter((route: MyRoute) => !route.meta?.hidden)
    );
    return {
      showRoutes,
    };
  },
});
</script>
